<template>
  <div class="home-top">
    <!-- 标题 -->
    <h3>人气推荐</h3>
    <!-- 商品列表 -->
    <div class="content">
      <van-card
        v-for="item in goodsList" :key="item.id"
        :tag="item.tag"
        :price="item.retail_price"
        :origin-price="item.origin_price" :desc="item.goods_brief"
        :title="item.name"
        :thumb="item.list_pic_url"
      >
      </van-card>
    </div>
  </div>
</template>

<script setup>
// 商品列表
const goodsList = [{
  retail_price: '5.00',
  name: '康师傅红烧牛肉面',
  goods_brief: '好吃又美味',
  list_pic_url: '/images/top1.jpg',
  tag: 'TOP1'
},
{
  retail_price: '88.00',
  origin_price: '98.00',
  name: '运动鞋',
  goods_brief: '柔软、舒适、透气',
  list_pic_url: '/images/top2.jpg',
  tag: 'TOP2'
},
{
  retail_price: '128.00',
  origin_price: '168.00',
  name: '超大玩偶熊',
  goods_brief: '可抱，可躺，怎么舒服怎么来',
  list_pic_url: '/images/top3.jpg',
  tag: 'TOP3'
},
{
  retail_price: '2010.00',
  origin_price: '4000.00',
  name: '扫地机器人',
  goods_brief: '清除污渍，解放双手',
  list_pic_url: '/images/top4.jpg',
  tag: 'TOP4'
},
{
  retail_price: '20.00',
  origin_price: '46.00',
  name: '雨伞',
  goods_brief: '七彩雨伞，好看还挡雨',
  list_pic_url: '/images/top5.jpg',
  tag: 'TOP5'
}]
</script>

<style lang="less" scoped>
.home-top {
  h3 {
    font-size: 22px;
    line-height: 30px;  text-align: center; margin: 0.5rem 0;
  }
  .content {
    --van-tag-primary-color: #FF8000;
    --van-card-font-size: 16px;
    --van-card-background: #f9f9f9;
    background: var(--van-card-background);
    :deep(.van-card) {
      margin-top: 0;
      .van-card   title {
        padding: 10px 0 5px;
      }
      .van-card   price-currency {
      font-size: var(--van-card-font-size);
      }
    }
    &::after {
      content: '';
      display: block;
      height: 3rem;
    }
  }
}
</style>